<template>
  <div class="body">
    <div class="top">
      <div class="returns">
        <div class="ret_img" onclick="returns()">
          <img src="../img/451245.png" alt="" />
        </div>
        <div class="ret_text">
          <b>打卡任务</b>
        </div>
      </div>
      <div class="top_img">
        <div class="texts"><b>不是看到希望才坚持</b></div>
        <div class="textss"><b>而是坚持才会看到希望</b></div>
        <img src="https://img.xiaopiu.com/userImages/img17502818acc5915e8.png" alt="" />
      </div>
    </div>
    <div class="datas">
      <div class="continuous">
        <div class="fate"><b>连续打卡<span style="color: red;">0</span>天</b></div>
        <p class="warn">打卡提醒</p>
        <div class="switchs">
          <label class="switch">
            <input type="checkbox">
            <span class="slider"></span>
          </label>
        </div>
      </div>
      <div class="all_data">

        <div class="dataa">
          <div class="data_img">+5</div>
          <div class="data_test">1天</div>
        </div>
        <div class="dataa">
          <div class="data_img">+10</div>
          <div class="data_test">2天</div>
        </div>
        <div class="dataa">
          <div class="data_img">+15</div>
          <div class="data_test">3天</div>
        </div>
        <div class="dataa">
          <div class="data_img">+20</div>
          <div class="data_test">4天</div>
        </div>
        <div class="dataa">
          <div class="data_img">+30</div>
          <div class="data_test">5天</div>
        </div>
        <div class="dataa">
          <div class="data_img">+40</div>
          <div class="data_test">6天</div>
        </div>
        <div class="dataa">
          <div class="data_img">+60</div>
          <div class="data_test">7天</div>
        </div>
      </div>
    </div>
    <div class="today">今日任务</div>

    <div class="null"></div>
  </div>
</template>

<script setup>

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.body {
  background-image: url(../img/img17492518acc2d8590.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

/* 返回和标题’ */
.top {
  height: 200px;
  width: 100%;
}

.returns {
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
}

.ret_img {
  width: 10%;
  margin-left: 3%;
  margin-top: 3px;
}

.ret_img img {
  width: 50%;
}

.ret_text {
  height: 40px;
  margin-left: 30%;
  line-height: 40px;
  z-index: 1;
}

.top_img {
  width: 100%;
  position: relative;

}

.top_img img {
  width: 70%;
  position: absolute;
  top: -65px;
  right: -3%;
}

.continuous {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

}

.texts {
  color: white;
  position: absolute;
  top: 40px;
  left: 20px;
  font-size: 15px;
}

.textss {
  color: white;
  position: absolute;
  top: 65px;
  left: 50px;
  font-size: 15px;
}

.datas {
  width: 100%;
  height: 140px;
  position: relative;
  top: -50px;
  background-color: #ffffff;
}

.fate {
  color: #535353;
  font-size: 17px;
}

/* 开关 */
.switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 17px;
  margin-top: 10px;
  margin-left: 10px;
}

.warn {
  margin-left: 140px;
  color: #bebebe;
  font-size: 14px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #bebebe;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: #1890ff;
}

input:checked+.slider:before {
  transform: translateX(18px);
}

/* 打卡天数 */
.all_data {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-evenly;
}

.dataa {
  width: 10%;
  height: 100%;
}

.data_img {
  width: 40px;
  height: 40px;
  color: #a8a4a8;
  margin-top: 10px;
  text-align: center;
  line-height: 40px;
  border-radius: 40px;
  background-color: #eeeeee;
}

.data_test {
  width: 100%;
  text-align: center;
  margin-top: 10px;
  color: #535153;
}

.today {
  height: 40px;
  color: #535353;
  line-height: 40px;
  margin-left: 10px;
  margin-top: -50px;
}

.task {
  width: 100%;
  height: 60px;
  border-radius: 5px;
  display: flex;
  margin-bottom: 5px;
  background-color: rgba(255, 255, 255, 0.6);
}

.name_text {
  width: 20%;
  height: 100%;
  padding: 5px;
}

.introduce {
  font-size: 12px;
  margin-top: 5px;
  color: #a8a4a8;
}

.integral {
  height: 100%;
  width: 55%;
  line-height: 60px;
  color: #ff8f07;
  font-size: 14px;
}

.buttons {
  width: 20%;
  height: 100%;
}

.buttona {
  height: 30px;
  width: 100%;
  color: white;
  font-size: 14px;
  border-radius: 30px;
  margin-top: 15px;
  line-height: 30px;
  text-align: center;
  background-color: #ffc300;
}

.null {
  width: 100%;
  text-align: center;
}
</style>